<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Dashboard">
  <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

  <title>花生手机-订单管理</title>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
  <!-- Bootstrap core CSS -->
  <link th:href="@{assets/css/bootstrap.css}" rel="stylesheet">
  <!--external css-->
  <link th:href="@{assets/font-awesome/css/font-awesome.css}" rel="stylesheet" />

  <!-- Custom styles for this template -->
  <link th:href="@{assets/css/style.css}" rel="stylesheet">
  <link th:href="@{assets/css/style-responsive.css}" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>

<section id="container" >
  <!-- **********************************************************************************************************************************************************
  TOP BAR CONTENT & NOTIFICATIONS
  *********************************************************************************************************************************************************** -->
  <!--header start-->
  <div th:insert="~{public::nav}"></div>
  <!--header end-->

  <!-- **********************************************************************************************************************************************************
  MAIN SIDEBAR MENU
  *********************************************************************************************************************************************************** -->
  <!--sidebar start-->
  <div th:insert="~{public::left}"></div>
  <!--sidebar end-->

  <!-- **********************************************************************************************************************************************************
  MAIN CONTENT
  *********************************************************************************************************************************************************** -->
  <!--main content start-->
  <section id="main-content">
    <section class="wrapper site-min-height">
      <h3><i class="fa fa-angle-right"></i> 订单管理 </h3>
      <div class="row mt">
        <div class="col-md-12">
          <div class="content-panel">
            <table class="table table-striped table-advance table-hover">
              <thead>
              <tr>
                <th>#</th>
                <th>账号</th>
                <th>商品</th>
                <th>订单时间</th>
                <th>状态</th>
                <th>完成时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="indent:${indents}">
                <th th:text="${indentStat.index}+1"></th>
                <th th:text="${indent.getUser().getuAccount()}"></th>
                <th th:text="${indent.getPhone().getpName()}"></th>
                <th th:text="${indent.getoTime()}"></th>
                <th>
                  <div th:switch="${indent.getoStatus()}">
                    <span class="label label-info label-mini" th:case="1">已付款/未发货</span>
                    <span class="label label-info label-mini" th:case="2">已发货/未签收</span>
                    <span class="label label-info label-mini" th:case="3">已签收/未评价</span>
                    <span class="label label-info label-mini" th:case="4">已评价</span>
                  </div>
                </th>
                <th th:text="${indent.getoFinshTime()}"></th>
                <th>
                  <button type="button" class="btn btn-theme" th:if="${indent.getoStatus() lt 2}" data-toggle="modal" data-target="#myModal" th:onclick="'javascript:update('+${indent.getoId()}+')'">发货</button>
                  <button type="button" class="btn btn-theme" th:if="${indent.getoStatus() ge 2}" disabled>无法操作</button>
                </th>
              </tr>
              </tbody>
            </table>
            <div class="row text-right" style="margin-right: 30px">
              <ul class="pagination" id="page">
              </ul>
            </div>
          </div><!-- /content-panel -->
        </div><!-- /col-md-12 -->
      </div><!-- /row -->
    </section><! --/wrapper -->
  </section><!-- /MAIN CONTENT -->
</section>

<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">是否发货</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form action="" method="post" id="updateForm">
          <input type="hidden" name="_method" value="PUT">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="update">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- js placed at the end of the document so the pages load faster -->
<script th:src="@{assets/js/jquery.js}"></script>
<script th:src="@{assets/js/bootstrap.min.js}"></script>
<script th:src="@{assets/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{assets/js/jquery.ui.touch-punch.min.js}"></script>
<script class="include" type="text/javascript" th:src="@{assets/js/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{assets/js/jquery.scrollTo.min.js}"></script>
<script th:src="@{assets/js/common-scripts.js}"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:inline="javascript">
  var currentPage = [[${currentPage}]];	//当前页
  var totalPages = [[${totalPages}]];
  $("#page").bootstrapPaginator({
    bootstrapMajorVersion:3, 	//对应的bootstrap版本
    currentPage: currentPage, 		//当前页数
    numberOfPages: 10, 		//每次显示页数
    totalPages:totalPages, 	//总页数
    shouldShowPage:true,	//是否显示该按钮
    useBootstrapTooltip:true,
    //点击事件
//    onPageClicked: function (event, originalEvent, type, page) {
//      window.location.href = "/calendar?page="+page;
//    }
    pageUrl: function(type, page, current){
      if (page==current) {
        return "javascript:void(0)";
      } else {
        return "/management-indent?page="+page;
      }
    }
  });
  function update(id) {
    $("#updateForm").attr("action","/management-indent/"+id);
  }
  $("#update").click(function () {
    $("#updateForm").submit();
  })
</script>
</body>
</html>
